import React from 'react'
import { Tabs } from 'antd'
import SourceView from '@/components/SourceView'
import ResizableTable from '@/components/ResizableTable';
import { useSelector, useDispatch } from 'react-redux'
import { State } from '@/apps/panel/reducers'
import { setEditorActiveTab } from '@/apps/panel/actions'
import './index.less'

export default function PanelView() {

    const dispatch = useDispatch();
    const activeTab = useSelector((state: State) => state.editor.activeTab)

    return (
        <div className="panel-view">
            {/* @ts-ignore */}
            <Tabs
                className='panel-view-tabs'
                onChange={(key) => {
                    dispatch(setEditorActiveTab(key))
                }}
                activeKey={activeTab}
                items={[{
                    key: 'table_view',
                    label: '列表视图',
                    children: <ResizableTable />
                }, {
                    key: 'source_view',
                    label: '源码视图',
                    children: <SourceView />
                }]}
            />
        </div>
    )
}
